JavaScript チュートリアル　配列　Arrayオブジェクト

2021年6月12日 2021年6月12日

配列

要素は0(ゼロ)から数える
いろんな型要素を入れることができる
要素はカンマ(,)で区切る
要素は[]で囲う

リストのようなものだね

リストを作ってオブジェクトのように変数に入れるんだね！
簡単な配列を見てみよう！

JavaScript MDN 配列ページ

Arrayオブジェクト　コントラスタ

const arr  = [1,2,3,5,10];
const arr1 = ["りんご" ,2 ,"apple"];
const arr2 = [1,"みかん"],[2,"orenge"]]

↑のパターンのように配列を作ることができます
arrとは『Array』の略でJavaScriptでは配列のデータを意味します
配列を呼び出すときには、

console.log(arr[0]};  //1
console.log(arr1[1]};  //2
console.log(arr2[1]}; //[2,"orenge"]

配列は左から0、1、2、と数えるんだったね！

unshiftとshift pushとpop

unshiftは先頭に要素を追加し、shiftは先頭の要素を削除します
pushは最後に要素を追加し、popは最後の要素を削除します

let arr = [2,3,4,5]
console.log(arr.unshift(1));
console.log(arr)   //[1,2,3,4,5]
console.log(arr.shift());
console.log(arr)   //[1,2,3,4]

console.log(arr.push(5));
console.log(arr)   //[1,2,3,4,5]
console.log(arr.pop());
console.log(arr)   //[1,2,3,4]

concat

配列を追加するときにはconcatメソッドを使います

let arr = [1,2,3];
let arr1 = arr.concat(4,5,6);

console.log(arr1);  //[1,2,3,4,5,6]

arr1 = arr.concat([4,5,6]);
console.log(arr1)  //{1,2,3,4,5,6}

splice

配列の任意の場所を選択して要素を書き換えることができる

ルール

第一引数　変更を開始する番数
第二引数　削除する要素数
第三引数以降　追加する要素を指定

let fruit = ["Apple","Grape","Orange","Banana","Lemon"];
console.log(fruit.splice(3,2,"Peach","Pineapple"));
console.log(fruit)   // ["Apple","Grape","Orange","Peach","Pineapple"]

第一引数に3＝bananaから、第二引数に二(二個変更)で["Apple","Grape","Orange","Peach","Pineapple"]

console.log(fruit.splice(3,2));
console.log(fruit)   //let fruit = ["Apple","Grape","Orange"]

第三引数に追加の要素を指定しなかった場合、範囲の要素を削除する

もっと詳しく→MDN

map

mapメソッドは配列内の要素を自由に指定し変換することができます
配列の順番通りに、各要素に対して呼び出す

const arr = [2,3,4];
const map = arr.map(x => x*3);
console.log(map)   //[6,9,12]

filter

全ての値から条件に合致する値を取得し新しい配列を作成

const arr1 = [2,3,4];
const arr2 = arr1.filter(x => x === 2); 
console.log(arr2)  //arrの中身は[2]

reduce

配列全体を変換します
今までのメソッドの関数は、配列の最初の要素でしたが、reduceは「accumlater」です
accumlater=蓄積する、積み上げる

const arr = [2,3,4];
cunst sum arr.reduce((a , x) => a += x);
console.log(arr)   //9

最初のaには配列の要素の最初の値の2が入ります
xに次の値の3が入り、a+x=で5がコールバックされます
次のステップでa=5,x=4が代入されて9の値が最終的に出力される流れです

join

配列の要素をまとめて文字列を作ります

const shiritori= ['リンゴ', 'ゴリラ', 'ラッパ'];

console.log(shiritori.join());   // "リンゴ,ゴリラ,ラッパ"

console.log(shiritori.join(''));　　　//"リンゴゴリララッパ"

console.log(shiritori.join('-'));    //"リンゴ-ゴリラ-ラッパ"

JavaScript チュートリアル固定ページ

Arrayオブジェクト コントラスタ